<template>
  <h3>使用 vue-request 可以更方便地管理接口</h3>
  <div class="time-mock">
    {{globalData}}
  </div>
</template>
<script setup lang="ts">
  import { onMounted,ref } from "vue"
  import { useRequest } from 'vue-request'
  import { getTimingData } from "@/api/mockData"
  
  const globalData = ref({})
  
  //第二种方式
  const  initData = async () =>{
    const {data: resultData, run} = useRequest(getTimingData,{
      pollingInterval: 5000,
      onSuccess: (data) =>{
        console.log('onSucess', data)
        globalData.value = data
      }
    })
  }
   

  // 第一种方式
  // const initData = async () =>{
  //   const res = await getTimingData()
  //   globalData.value = res.data;
  //   const timer = setTimeout(() =>{
  //     clearTimeout(timer)
  //     initData()
  //   },3000)
  // }

  onMounted(() =>{
    initData()
  })
  

</script>
<style lang="scss" scoped>
.time-mock {
  margin-top: 20px;
}
</style>